<template>
	<div id="container">
		<!-- <button class="addEventBtn" @click="activeAdd">事件添加</button> -->
		<el-dropdown
			trigger="click"
			:class="isChosen == true ? 'chosen' : ''"
			@command="handleCommand"
		>
			<span class="el-dropdown-link title">
				事件添加
				<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="on">
					<img src="img/事件.png" alt="" />
					激活添加
				</el-dropdown-item>
				<el-dropdown-item command="off">
					<img src="img/关闭_操作_jurassic.png" alt="" />
					关闭添加
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<el-dialog
			title="事件添加"
			v-el-drag-dialog
			:modal="false"
			:visible.sync="dialogFormVisible"
			:before-close="cancelUpdate"
			:close-on-click-modal="false"
			width="350px"
		>
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-width="100px"
				size="mini"
			>
				<el-form-item label="事件编号" prop="SJid">
					<el-input v-model="form.SJid" placeholder="SJ202208091215"></el-input>
				</el-form-item>
				<el-form-item label="事件类型" prop="type">
					<el-select v-model="form.type" placeholder="请选择事件类型">
						<el-option label="碰撞" value="碰撞"></el-option>
						<el-option label="刮擦" value="刮擦"></el-option>
						<el-option label="失火" value="失火"></el-option>
						<el-option label="翻车" value="翻车"></el-option>
						<el-option label="碾压" value="碾压"></el-option>
						<el-option label="其它" value="其它"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="事件等级" prop="level">
					<el-select v-model="form.level" placeholder="请选择事件等级">
						<el-option label="轻微事故" value="0"></el-option>
						<el-option label="一般事故" value="1"></el-option>
						<el-option label="重大事故" value="2"></el-option>
						<el-option label="特大事故" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发生时间" prop="datetime">
					<el-date-picker
						v-model="form.datetime"
						value-format="yyyy.M.d H:m:s"
						type="datetime"
						placeholder="选择日期时间"
						:picker-options="pickerOptions"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="事件地址" prop="address">
					<el-input v-model="form.address"></el-input>
				</el-form-item>

				<el-form-item label="车辆牌号" prop="number">
					<el-input v-model="form.number"></el-input>
				</el-form-item>
				<el-form-item label="司机名字" prop="user">
					<el-input v-model="form.user"></el-input>
				</el-form-item>
				<el-form-item label="审核状态" prop="level">
					<el-select v-model="form.statu" placeholder="请选择审核状态">
						<el-option label="待处理" value="0"></el-option>
						<el-option label="处理中" value="1"></el-option>
						<el-option label="已归档" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						@click.stop="cancelUpdate"
						style="font-size: 15px; color: #000"
					>
						取 消
					</el-button>
					<el-button
						type="primary"
						@click="submit('form')"
						style="font-size: 15px; color: #000"
					>
						确 定
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
var map;
var source;
var draw;
var layer;
var docLayer;
var position;
import { createDraw } from '../../../utils/Draw.js';
import elDragDialog from '../../directive/el-dragDialog'; //导入自定义弹窗拖拽
export default {
	directives: {
		// 自定义拖拽弹窗配置
		elDragDialog,
	},
	data() {
		return {
			isChosen: false, //是否激活添加事件菜单
			addValue: [],
			dialogFormVisible: false,
			form: {
				SJid: '',
				type: '',
				level: '',
				datetime: '',
				address: '',
				number: '',
				user: '',
				statu: '',
			},
			formLabelWidth: '150px',
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > new Date().getTime();
				},
			},
			rules: {
				SJid: [
					{ required: true, message: '请输入编号', trigger: 'blur' },
					{
						message: '请输入编号',
						trigger: 'blur',
					},
				],
				type: [
					{ required: true, message: '请选择事件类型', trigger: 'change' },
				],
				level: [
					{
						required: true,
						message: '请选择审核状态',
						trigger: 'change',
					},
				],
				address: [
					{ required: true, message: '请填写活动形式', trigger: 'blur' },
				],
				datetime: [
					{
						// validator: checkTime,
						required: true,
						message: '请选择日期',
						trigger: 'change',
					},
				],
				number: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
				user: [
					{ required: true, message: '请填写驾驶员名字', trigger: 'blur' },
				],
				statu: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
			},
		};
	},

	methods: {
		handleCommand(command) {
			if (command == 'on') {
				this.activeAdd();
				this.isChosen = true;
			} else {
				this.removeAddEventDraw();
				this.isChosen = false;
			}
		},
		activeAdd() {
			var that = this;
			map = this.$store.state.map;
			docLayer = this.$store.state.docLayer;
			/* 1、激活画布,获取坐标 */
			source = new ol.source.Vector({
				wrapX: false,
			});
			layer = new ol.layer.Vector({
				source,
			});
			map.addLayer(layer);
			draw = createDraw({
				type: 'Point',
				source,
				callback: this.handleDraw,
			});
			map.addInteraction(draw); //添加画笔
		},
		submit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					// this.$message.success('添加事件成功');
				} else {
					return false;
				}
				this.dialogFormVisible = false;
				// console.log(this.form);
			});
			var that = this;

			var gpoint = new Zondy.Object.GPoint(position[0], position[1]);
			//设置当前点要素的几何信息
			var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] });
			//描述点要素的符号参数信息
			var pointInfo = this.addPointStyle(this.form.statu); //判断状态赋予不同的样式
			//设置当前点要素的图形参数信息
			var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
				InfoType: 1,
				PntInfo: pointInfo,
			});
			for (var value in that.form) {
				that.addValue.push(that.form[value]);
			}
			//设置添加点要素的属性信息
			console.log(that.addValue);
			var attValue = that.addValue;

			var feature = new Zondy.Object.Feature({
				fGeom: fGeom,
				GraphicInfo: webGraphicInfo,
				AttValue: attValue,
			});
			//设置要素为点要素
			feature.setFType(1);
			//创建一个要素数据集
			var featureSet = new Zondy.Object.FeatureSet();
			//设置属性结构
			var cAttStruct = new Zondy.Object.CAttStruct({
				FldName: [
					'事件编号',
					'事件类型',
					'事件等级',
					'发生时间',
					'发生地点',
					'车牌号',
					'驾驶员',
					'处理状态',
				],
				FldNumber: 8,
				FldType: [
					'string',
					'string',
					'int',
					'string',
					'string',
					'string',
					'string',
					'int',
				],
			});
			featureSet.AttStruct = cAttStruct;
			//添加要素到要素数据集
			featureSet.addFeature(feature);
			var editService = new Zondy.Service.EditDocFeature('guanggu', 2, {
				ip: 'localhost',
				port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
			});
			//执行添加点要素功能
			editService.add(featureSet, onPntSuccess);
			//添加点要素回调函数
			function onPntSuccess(data) {
				if (data.succeed) {
					that.$message.success('添加事件成功');

					docLayer.refresh();
				} else {
					that.$message.error('添加事件失败');
				}
			}
		},
		// -------------------------点要素的符号参数信息函数-----------------------------------
		addPointStyle(sloveType) {
			// sloveTyp代表处理状态，0为未处理，1为处理中，2 为已归档
			let Color = '';
			if (sloveType == 0) {
				Color = 6;
			} else if (sloveType == 1) {
				Color = 4;
			} else {
				Color = 90;
			}
			let pointInfo = new Zondy.Object.CPointInfo({
				Angle: 0,
				Color: Color,
				Space: 0,
				SymHeight: 5,
				SymID: 21, //子图号 都是默认的
				SymWidth: 5,
			});
			return pointInfo;
		},
		// 取消事件添加
		cancelUpdate() {
			this.dialogFormVisible = false;
			this.$message.warning('已取消事件添加');
			map.removeInteraction(draw); //移除画笔
			map.removeLayer(layer);
		},
		removeAddEventDraw() {
			map.removeInteraction(draw); //移除画笔
			map.removeLayer(layer);
		},
		handleDraw(e) {
			this.dialogFormVisible = true;
			position = e.feature.getGeometry().getCoordinates();
			map.removeLayer(layer);
			map.removeInteraction(draw);
		},
	},
};
</script>

<style scoped>
.addEventBtn {
	z-index: 11;
	border-radius: 10px;
	border: none;
	border-bottom: 2px solid white;
	height: 33px;
	width: 100px;
	font-size: 18px;
	background-color: rgba(248, 248, 132, 0.7);
}
.addEventBtn:hover {
	cursor: pointer;
	border: none;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
	text-decoration: underline;
}
.el-dropdown {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
	z-index: 11;
	border-radius: 10px;
	border-bottom: 2px solid white;
	font-size: 16px;
	font-weight: 500;
	background-color: rgba(248, 248, 132, 0.7);
}

.title {
	font-size: 18px;
}
.el-dropdown:hover {
	cursor: pointer;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
}
.chosen {
	/* 激活菜单显示的样式 */
	background-color: antiquewhite !important;
	color: darkcyan !important;
}
.container {
	cursor: pointer;
}
.el-date-editor.el-input,
.el-select {
	width: 220px;
}
</style>
